<script setup>

  import { computed, reactive, ref } from 'vue';

  import {
    onLoad,
    onPageScroll, onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app';
  import businessScrollList from '@/sheep/businessCom/business-scroll-list.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sheep from '@/sheep';
  import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';

  const src = ref('https://www.zhangfkj.cn/zfkj/14_1aac4ce5-d664-4555-a417-46e06d93943fWechatIMG6926.jpg');
  const ruleList = [{
    name: '正平保障',
    content: '',
  }, {
    name: '七天无理由',
    content: '4242',
  }, {
    name: '退换无忧',
    content: '4242',
  }, {
    name: '规则',
    content: '4242',
  }];

  const tabsList = [
    { name: 'home-top', title: '限时抢购', subTitle: '副标题' },
    { name: 'home-top', title: '电器兑换', subTitle: '副标题' },
    { name: 'home-top', title: '居家兑换', subTitle: '副标题' },
    { name: 'home-top', title: '保健兑换', subTitle: '副标题' },
    { name: 'home-top', title: '美妆兑换', subTitle: '副标题' },
  ];


  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);


  const like = computed(() => sheep.$store('category').search?.suggest.map(item => item.searchTerm));
  const state = reactive({
    showModal: false,
    bottomListActive: 0,
    searchParam: {
      name: tabsList[0].title,
    },
    stickyDisplay: 'none',
  });

  const tabChange = (tabItem, index) => {
    state.tabActive = index;
    if (index === 0) {
      state.bottomListActive = 0;
      state.searchParam.name = tabsList[0].title;
      return;
    }
    state.searchParam.name = tabItem.title;
  };

  const user = computed(() => {
    return sheep.$store('user').userInfo;
  });

  function content() {
    return '一. 积分获取方式\n' +
      '1.新用户\n' +
      '新用户可免费获赠一定的随机体验积分。新用户是指没有在本商城提交过订单的用户，同一账号、同一手机号、同一终端设备号或其它合理显示为同一用户的情形，均视为同一用户。\n' +
      '2.签到\n' +
      '用户每日签到可领取50积分。\n' +
      '3.购买返积分商品购买返积分商品的用户，选择在线支付成功购买后可立返积分。\n' +
      '4.关注公众号\n' +
      '关注公众号可以获得一定的奖励积分。\n' +
      '5.分享送好礼活动\n' +
      '分享送好礼活动,将一次性赠送500积分，再次分享不再增加积分。\n' +
      '\n' +
      '二、积分有效期\n' +
      '新用户获赠的体验积分有效期为自获取之日起计算的7天内，有效期内未使用的体验积分到期将自动作废，用户通过签到和购买返积分商品获取的积分永久有效，系统将自动优先扣减即将过期的积分。\n' +
      '\n' +
      '三、积分扣减规则\n' +
      '通过下单购买积分兑换活动页面内的所有商品，会扣减相应积分。\n' +
      '\n' +
      '四、积分退回规则\n' +
      '在积分商城使用积分兑换的商品，订单产生退款时，不会退回积分。\n' +
      '\n' +
      '五、价格说明\n' +
      '1. 划线价格： 商品展示的划线价格是商品的专柜价、吊牌价、零售价、指导价、曾经展示过的销售价等，并非原价，由于地区、时间的差异性和市场的行情波动，该价格仅供您参考。\n' +
      '2. 未划线价格： 未划线的价格是商品的实时标价，并不一定为您最终实际支付的价格，具体的成交价格可能会因为您使用积分、活动、优惠券等发生变化，请以订单结算价格为准。\n' +
      '3. 如您对商品的标题、价格、详情等信息内容有疑问，请在购买前咨询商城在线客服，客服工作时间为周一至周日早8:30至晚18:00。\n' +
      '4. 我们网站上的产品和定价信息在公布前已经过核实。但是，在极少数情形下可能有误。如果我们发现定价错误，我们将通知您，取消您的订单，并对订单金额全额退款。\n' +
      '\n' +
      '六、其他说明\n' +
      '1. 商品的兑换热度是指该商品一定期间内访问人数、下单人数、实际支付人数、平台推荐力度等的综合指标，并非商品的销量，由于地区、时间或网络波动的差异，兑换热度仅供您参考。\n' +
      '2. 如用户存在违规盗刷积分行为，我们有权取消该违规用户非法获取的积分资格，已领取的积分将被扣回，并要求其对已发放的活动所得进行返还，承担相应法律责任。\n' +
      '3. 如遇不可抗力因素，本商城有权取消、修改或暂停积分兑换等活动。\n' +
      '4. 为了提升用户体验，我们将不定时更新积分服务内容，积分规则也可能会随之变更，更新后的内容于公布之日起生效。如您选择继续使用积分服务，产生购物行为即表示您默认更新后的积分规则。若不同意变更后的积分规则，您有权停止使用积分服务。双方协商一致的，也可另行变更相关服务和对应内容条款。如更新后涉及您的主要权利或责任，我们会以公告、客户端通知或短信等方式为您提示，您也可以随时在本页面查阅积分规则的最新版本。\n' +
      '5. 下单时请仔细核对收件信息，商品一经发出便交由快递公司配送，无法再为您进行修改，因填写失误所产生的配送相关问题将由您自行承担责任。\n' +
      '6. 下单后一般在48小时内根据订单顺序为您发货，如遇节假日或周末可能由于订单较多导致发货时间延长至72小时。如您一次购买多个商品，可能由于商品存放的仓库位置不同，分多个包裹为您发货，还请您耐心等待。\n' +
      '7. 不支持指定快递，发货后物流需要3-5日为您送达，偏远地区7-10日，商品由仓库合作的快递公司进行配送，无法保证送达时效，不便之处敬请谅解。\n' +
      '8. 护肤品请先在耳后肌肤测试，确认无过敏反应再用于面部，由于特殊商品（如护肤品、食品等）开封后将影响二次销售，故不支持七天无理由退换货。\n' +
      '9. 根据我国法律规定，快递收寄须实名制，请您在填写收件人时使用真实姓名，避免使用“X先生、X女士”及昵称等收件信息，导致出现快递无法签收。\n' +
      '10. 签收快递时请当面与快递员确认商品是否完好无损，产品配件是否齐全。若查看时发现有损坏、漏发、划痕等情况，请您直接拒收。一旦签收，即代表您已经确认商品的完整性，不再作为商品售后依据。\n' +
      '11. 七天无理由退货须保证商品不影响二次销售，配件、说明书及赠品等齐全，若有破损、缺失等可能会导致退货失败。建议您自产品签收之日起，将原包装保留至少15天。凡商品产生人为损坏的均不支持退换货，七天无理由退货运费由您自行承担，商品质量问题导致的退换货及维修，运费由您先行垫付，寄回后请联系在线客服报销运费，拒收任何到付件。\n' +
      '12. 根据我国《新广告法》出台实施的极限化“违禁词”规定，本商城已尽量规避，即日起商城所有商品标题、图片、详情等内含极限化“违禁词”介绍的文字说明一律失效，不作为商品描述依据。凡是您进行支付即视为认同，如无法认可商品描述信息，请勿购买。\n' +
      '13. 在法律允许范围内，本商城拥有最终解释权。如有任何疑问，请在第一时间联系商城在线客服或拨打400-805-1585咨询热线，在线客服工作时间为：周一至周日早8:30至晚18:00，感谢您对本商城的支持与信赖，祝您购物愉快！\n' +
      '14. 近期有不法分子未经授权或许可擅自使用我司名义、盗用我司旗下网站页面风格从事非法活动，我司保留采取一切必要法律手段追究相关侵权方责任之权利，任何机构或个人如发现上述涉嫌对我司相关权益的侵害行为欢迎向我司反映或咨询，也请社会公众提高警惕，注意甄别，避免造成不必要的损失！';
  }

  // #ifdef H5
  const navbar = 'none';
  // #endif
  // #ifdef MP
  const navbar = 'custom';
  // #endif

  onPageScroll((e) => {
    if (e.scrollTop > 100) {
      state.stickyDisplay = 'flex';
    } else {
      state.stickyDisplay = 'none';
    }
  });
  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
  });
</script>

<template>
  <view class="uno-fixed uno-bg-white uno-h100 uno-flex uno-flex-justify-between uno-items-center uno-p1" :style="{
    top:0,
    left:0,
    width:'100%',
    zIndex:10,
    display: state.stickyDisplay,
  }">
    <view class="uno-flex-grow">
      <view
        class="uno-flex uno-justify-start uno-border uno-border-color-#ff4a08 uno-border-style-solid uno-border-rd-30rpx"
        @click="sheep.$router.go('/pages/index/searchGood')"
      >
        <up-icon name="search" size="30" color="red"></up-icon>
        <up-notice-bar direction="column" :text="like" speed="250"
                       color="#c2c2c2" icon="" bgColor="transparent"
        ></up-notice-bar>
        <view
          class="uno-flex uno-justify-center uno-items-center uno-border uno-border-color-#ff4a08 uno-border-style-solid uno-border-rd-30rpx
          uno-color-white uno-bg-#ff4a08 uno-pl1 uno-pr1
          uno-w-100">
          搜索
        </view>
      </view>

    </view>
    <view class="flex-column flex uno-w-100">
      <uni-icons type="person-filled" size="30" color="red">客服</uni-icons>
    </view>
  </view>
  <s-layout
    title="首页" :navbar="navbar" tabbar="/pages/index/exchange" :bgStyle="template.page"
    :navbarStyle="template.navigationBar" onShareAppMessage>
    <up-modal
      :show="state.showModal" title="积分规则" :content='content()' @confirm="state.showModal = false"
      closeOnClickOverlay @close="state.showModal = false">
      <view v-html="content().split('\n').join('<\/br>')" class="uno-h500 uno-overflow-auto" />
    </up-modal>


    <view class="header uno-relative">
      <view class="uno-absolute uno-w-[100%]" style="z-index: 2">
        <up-notice-bar
          text="温馨提示：尊敬的限时抢购会员，您的会员分即将过期，请尽快使用。本商城非运营商积分商城。"
          color="rgba(255, 255, 255, 0.6)" bg-color="transparent" />
      </view>
      <up-image :show-loading="true" :src="src" width="100%" height="280px" @click="click" />
      <view
        class="uno-flex uno-flex-justify-between uno-absolute uno-w-[90%]"
        style="bottom: 90rpx;left: 5%;padding:0 20rpx;box-sizing: border-box;background: rgba(0,0,0,.2);border-radius: 20rpx;color: white"
        @tap="state.showModal = true">
        <text v-for="(item )  in ruleList" style="font-size: 21rpx">{{ item.name }}</text>
      </view>
    </view>
    <view class="container uno-bg-#f5f5f5 uno-border-rd-lg" style="border-radius: 50rpx ">
      <view class="uno-flex uno-flex-col uno-bg-white uno-p3 uno-mr2 uno-ml2 " style="border-radius: 20rpx ">
        <view class="uno-flex uno-color-red uno-justify-between">
          <view style="font-weight: bold;">
            <text style=" font-size: 60rpx;" color="#f80519">{{ user.point }}</text>
            <text color="#f80519">&nbsp;&nbsp;积分</text>
          </view>
          <view
            class="uno-bg-#f80519 uno-flex uno-justify-center uno-items-center uno-color-white uno-border-rd-lg uno-h-60 uno-w-150 uno-pr2 uno-pl2"
            style="border-radius: 30rpx; font-size: 30rpx;">立即兑换
          </view>
        </view>

        <view class="uno-flex ">
          <up-count-down :time="12 * 60 * 60 * 1000" format="HH:mm:ss" />
          后到期。为避免失效，请尽快使用!
        </view>
      </view>
    </view>

    <view class="uno-bg-white">

      <up-tabs
        @click="tabChange"
        :list="tabsList" keyName="title"
        class="top-tabs"
        lineWidth="60"
        lineColor="red"
        :activeStyle="{
            color: 'red',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#000',
            transform: 'scale(1)'
        }"
        itemStyle="padding:15rpx;flex:1; height: 70rpx;width: 150rpx;"
      />
    </view>

    <businessScrollList :params="state.searchParam" />
  </s-layout>
</template>

<style scoped lang="scss">
  .container {
    position: relative;
    z-index: 10;
    margin-top: -70rpx;
    border-radius: 80rpx 80rpx 0 0;
    padding-bottom: 20rpx;
    padding-top: 30rpx;
  }
</style>